[V0_FILE]jpg:file="public/nitro-black-coffee-product.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/nitro-black-coffee-product-pWlCij15XMBiSslNwlemrNyog5tjaI.jpg" isMerged="true" [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.0", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client"; import { useState, useRef, useEffect } from "react"; import { Button } from "@/components/ui/button"; import { ShoppingCart, Settings } from "lucide-react"; import { cn } from "@/lib/utils"; import useClickOutside from "@/hooks/use-click-outside"; export default function ProductPage() { const [cartCount, setCartCount] = useState(0); const [showPath, setShowPath] = useState(true); const [showSettings, setShowSettings] = useState(true); const [cartBounce, setCartBounce] = useState(false); const [pathConfig, setPathConfig] = useState({ startCurve: { horizontal: -420, arcHeight: -370, }, endCurve: { horizontal: 130, arcHeight: 400, }, duration: 1500, }); const containerRef = useRef(null); const cartRef = useRef(null); const productImageRef = useRef(null); const [, setUpdateTrigger] = useState(0); const settingsRef = useRef(null); useClickOutside(settingsRef, () => { setShowSettings(false); }); useEffect(() => { const handleResize = () => { setUpdateTrigger((prev) => prev + 1); }; const handleScroll = () => { setUpdateTrigger((prev) => prev + 1); }; window.addEventListener("resize", handleResize); window.addEventListener("scroll", handleScroll); return () => { window.removeEventListener("resize", handleResize); window.removeEventListener("scroll", handleScroll); }; }, []); const handleAddToCart = () => { setCartCount((prev) => prev + 1); const productImage = document.querySelector( "[data-product-image]" ) as HTMLImageElement; if (!productImage || !containerRef.current || !cartRef.current) { return; } const clone = productImage.cloneNode(true) as HTMLImageElement; clone.style.position = "fixed"; clone.style.pointerEvents = "none"; clone.style.zIndex = "9999"; clone.style.width = "80px"; clone.style.height = "80px"; const productRect = productImage.getBoundingClientRect(); const cartRect = cartRef.current.getBoundingClientRect(); clone.style.left = productRect.left + "px"; clone.style.top = productRect.top + "px"; document.body.appendChild(clone); const startX = productRect.left + productRect.width / 2; const startY = productRect.top + productRect.height / 2; const endX = cartRect.left + cartRect.width / 2; const endY = cartRect.top + cartRect.height / 2; const duration = pathConfig.duration; const startTime = Date.now(); const animate = () => { const elapsed = Date.now() - startTime; const progress = Math.min(elapsed / duration, 1); const easeProgress = progress < 0.5 ? 2 * progress * progress : -1 + (4 - 2 * progress) * progress; // Calculate control points for cubic Bézier const control1X = startX + pathConfig.startCurve.horizontal; const control1Y = startY + pathConfig.startCurve.arcHeight; const control2X = endX + pathConfig.endCurve.horizontal; const control2Y = endY + pathConfig.endCurve.arcHeight; // Cubic Bézier calculation const x = Math.pow(1 - easeProgress, 3) * startX + 3 * Math.pow(1 - easeProgress, 2) * easeProgress * control1X + 3 * (1 - easeProgress) * Math.pow(easeProgress, 2) * control2X + Math.pow(easeProgress, 3) * endX; const y = Math.pow(1 - easeProgress, 3) * startY + 3 * Math.pow(1 - easeProgress, 2) * easeProgress * control1Y + 3 * (1 - easeProgress) * Math.pow(easeProgress, 2) * control2Y + Math.pow(easeProgress, 3) * endY; clone.style.left = x - 40 + "px"; clone.style.top = y - 40 + "px"; const scale = 1 - easeProgress * 0.7; const opacity = 1 - easeProgress * 0.5; clone.style.transform = `scale(${scale})`; clone.style.opacity = opacity.toString(); if (progress < 1) { requestAnimationFrame(animate); } else { document.body.removeChild(clone); setCartBounce(true); setTimeout(() => { setCartBounce(false); }, 600); } }; animate(); }; const calculateSVGPath = () => { if (!productImageRef.current || !cartRef.current) { return ""; } const productRect = productImageRef.current.getBoundingClientRect(); const cartRect = cartRef.current.getBoundingClientRect(); const startX = productRect.left + productRect.width / 2; const startY = productRect.top + productRect.height / 2; const endX = cartRect.left + cartRect.width / 2; const endY = cartRect.top + cartRect.height / 2; const control1X = startX + pathConfig.startCurve.horizontal; const control1Y = startY + pathConfig.startCurve.arcHeight; const control2X = endX + pathConfig.endCurve.horizontal; const control2Y = endY + pathConfig.endCurve.arcHeight; return `M ${startX} ${startY} C ${control1X} ${control1Y}, ${control2X} ${control2Y}, ${endX} ${endY}`; }; return (

setShowPath(e.target.checked)} className="w-4 h-4 rounded border-slate-300" /> Show Animation Path

{/* Path Configuration */}

{/* Flight Path - Start Curve */}

Flight Path - Start Curve

Horizontal Position: {pathConfig.startCurve.horizontal} setPathConfig({ ...pathConfig, startCurve: { ...pathConfig.startCurve, horizontal: Number.parseInt(e.target.value), }, }) } className="w-full" />

Arc Height: {pathConfig.startCurve.arcHeight} setPathConfig({ ...pathConfig, startCurve: { ...pathConfig.startCurve, arcHeight: Number.parseInt(e.target.value), }, }) } className="w-full" />

Flight Path - End Curve

Horizontal Position: {pathConfig.endCurve.horizontal} setPathConfig({ ...pathConfig, endCurve: { ...pathConfig.endCurve, horizontal: Number.parseInt(e.target.value), }, }) } className="w-full" />

Arc Height: {pathConfig.endCurve.arcHeight} setPathConfig({ ...pathConfig, endCurve: { ...pathConfig.endCurve, arcHeight: Number.parseInt(e.target.value), }, }) } className="w-full" />

{/* Duration */}

Animation Speed: {pathConfig.duration}ms setPathConfig({ ...pathConfig, duration: Number.parseInt(e.target.value), }) } className="w-full" />

{/* Reset Button */}

{cartCount > 0 && ( {cartCount} )}

{showPath && ( )}

$100.00

Earfun Wave pro

); } [V0_FILE]typescript:file="hooks/use-click-outside.ts" import { type RefObject, useEffect } from "react"; function useClickOutside( ref: RefObject, handler: (event: MouseEvent | TouchEvent) => void ): void { useEffect(() => { const handleClickOutside = (event: MouseEvent | TouchEvent) => { if (!ref || !ref.current || ref.current.contains(event.target as Node)) { return; } handler(event); }; document.addEventListener("mousedown", handleClickOutside); document.addEventListener("touchstart", handleClickOutside); return () => { document.removeEventListener("mousedown", handleClickOutside); document.removeEventListener("touchstart", handleClickOutside); }; }, [ref, handler]); } export default useClickOutside; [V0_FILE]jpg:file="public/images/design-mode/71iBJ8MknGL.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/71iBJ8MknGL-QL2r4Wzjkw4CLnkupncprbTViQlAQI.jpg" isMerged="true"

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This